<template>
  <div class="login-form">
    <h2>Login</h2>
    <form @submit.prevent="handleLogin">
      <div class="input-group">
        <label for="username">Username:</label>
        <input type="text" v-model="username" id="username" required>
      </div>
      <div class="input-group">
        <label for="password">Password:</label>
        <input type="password" v-model="password" id="password" required>
      </div>
      <router-link to="/homepage" class="btn btn-secondary">Login</router-link>
    </form>
    <div class="button-group">
      <router-link to="/" class="btn btn-secondary">Back to Init</router-link>
      <router-link to="/register" class="btn btn-secondary">Register</router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    handleLogin() {
      // 在这里处理登录逻辑
      console.log('Username:', this.username);
      console.log('Password:', this.password);
    }
  }
};
</script>

<style scoped>
.login-form {
  max-width: 400px;
  margin: auto;
  padding: 2em;
  border: 1px solid #ccc;
  border-radius: 1em;
  background-color: #f9f9f9;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.input-group {
  margin-bottom: 1em;
}
.input-group label {
  margin-bottom: .5em;
  color: #333;
  display: block;
}
.input-group input {
  border: 1px solid #ccc;
  padding: .5em;
  font-size: 1em;
  width: 100%;
  box-sizing: border-box;
  border-radius: .3em;
}
.btn {
  padding: 0.7em;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: .3em;
  cursor: pointer;
  width: 100%;
  margin-top: 1em;
  text-decoration: none;
  text-align: center;
}
.btn-secondary {
  background-color: #6c757d;
}
.btn-primary:hover {
  background-color: #0056b3;
}
.btn-secondary:hover {
  background-color: #5a6268;
}
.button-group {
  display: flex;
  justify-content: space-between;
  margin-top: 1em; /* 调整这个值以控制按钮组的位置 */
}
.button-group .btn {
  width: 30%; /* 调整按钮宽度以适应两列布局 */
}
</style>
